<template>
  <div class="container">
    <mt-header fixed title="">
      <p slot="right">
        <mt-button @click="close">关闭</mt-button>
      </p>
    </mt-header>
    <div v-if="contract.contractType !== 6 && contract.contractType !== 4">
      <div class="header">
        <h2 v-text="contract.name"></h2>
        <div class="sign-time">
          <span class="time-text" v-text="'合同编号：'+ contract.contractCode"></span>
          <div class="status-text">
            <span>
              <em>签约日期:</em>
            <em v-text="formateDate(contract.signDate)"></em>
            </span>
            <span>
              <em>签约日期:</em>
            <em v-text="formateDate(contract.expiredTime)"></em>
            </span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="cell">
          <label>出让合同</label>
          <span>
            <i class="fa fa-lg" :class="[contract.sellLand ==1 ? 'fa-check-square-o green' : 'fa-square-o black']"></i>
          </span>
          <label>办理土地证</label>
          <span>
            <i class="fa fa-lg" :class="[contract.landCert ==1 ? 'fa-check-square-o green' : 'fa-square-o black']"></i>
          </span>
        </div>
        <div class="cell">
          <label>面积<em>（土地/厂房）</em></label>
          <span>
            <em v-text="contract.area"></em>
            <i>(M&sup2)</i>
          </span>
        </div>
        <div class="cell">
          <label>位置<em>（土地/厂房）</em></label>
          <span v-text="contract.position"></span>
        </div>
        <div class="cell">
          <label>总金额</label>
          <span>
            <em v-text="contract.amount.toFixed(2)"></em>
            <i>(元)</i>
          </span>
        </div>
        <div class="cell">
          <label>附件</label>
          <a @click="viewFiles">
            <span v-text="contract.contractAttach"></span>
          </a>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="header">
        <h2 v-text="contract.name"></h2>
      </div>
      <div class="content">
        <div class="cell">
          <label>附件</label>
          <a @click="viewFiles">
            <span v-text="contract.contractAttach"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    props:['contract'],
    methods:{
      close(){
        this.$emit('ievent')
      },
      formateDate(date) {
        return moment(date).format("YYYY-MM-DD")
      },
      viewFiles(){
        if(this.contract.contractAttach) {
          window.open('/api/project/contract/file?keyName=' + this.contract.contractAttach)
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    height: 100%;
    position: relative;
    .header {
      background: #26A2FF;
      min-height: 60px;
      display: block;
      padding: 20px;
      position: relative;
      top:40px;
      h2{
        color: #fff;
      }
      .sign-time{
        @include flex-left;
        margin-top: 20px;
        color: #fff;
        .time-text{
          flex: 1;
          @include fz(4.5px);

        }
        .status-text {
          @include fz(4.5px);
          span{
            display: block;
          }
        }
      }
    }
    .content {
      margin-top:50px;
      .cell {
        border-bottom: 0.5px solid #cecece;
        background-color: #fff;
        label {
          display: inline-block;
          @include fz(4.5px);
          color: #80848f;
          padding: 10px 0 10px 20px;
          width: 100px;
          em{
            @include fz(3px);
          }
        }
        span {
          display: inline-block;
          @include fz(4.6px);
          i{
            @include fz(4px);
            font-weight: 100;
          }
        }
      }
    }
  }
  .green {
    color: #1aad19;
  }

  .red {
    color: #ce3c39;
  }
  .black{
    color: #0d0d0d;
  }
  .close-btn{
    position: absolute;
    padding:20px;
    top: -10px;
    right:0px;
    color: #80848f;
  }
</style>
